<template>
  <view class="container rela">
    <bt-cropper ref="cropper" :imageSrc="imageSrc"></bt-cropper>
    <div
      class="bottom abso flexbet"
      :style="{ bottom: safeAreaBottom + 'rpx' }"
    >
      <div @click.stop="cancel">取消</div>
      <div @click.stop="crop">完成</div>
    </div>
  </view>
</template>


<script>
import { uploadOSS, fammterString } from "@/common/upload.js";
export default {
  data() {
    return { imageSrc: "", safeAreaBottom: 0 };
  },
  onShow() {
    this.safeAreaBottom = getApp().globalData.$safeAreaBottom;
  },
  onLoad(options) {
    const imageSrc = decodeURIComponent(options.imageSrc);
    this.imageSrc = imageSrc;
  },
  methods: {
    cancel() {
      uni.navigateBack();
    },
    crop() {
      // 通过组件定义的ref调用cropper方法，返回一个promise对象
      this.$refs.cropper.crop().then((res) => {
        let file = [
          {
            url: res,
            name: res,
          },
        ];
        uploadOSS(file).then((res1) => {
          uni.$emit("returnData", {
            type: "avatar",
            value: res1[0].url,
          });
          uni.navigateBack({
            delta: 1,
          });
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
}
.bottom {
  width: 750rpx;
  border-top: 1rpx solid #474747;
  padding: 40rpx 40rpx 50rpx 40rpx;
  bottom: 17px;
  box-sizing: border-box;
  div {
    color: white;
  }
}
/deep/.bt-container {
  background: black;
}
</style>